<template>
  <el-container style="height: 100vh" v-loading="loading">
    <el-header class="header">
      <div class="logo">管理平台</div>
      <div class="loginInfoAndAction">
        <span class="actName"
          >{{ $store.state.userInfo.roleName }}:&nbsp;&nbsp;{{
            $store.state.userInfo.realname ||
            $store.state.userInfo.username
          }}</span
        >
        <el-button
          size="mini"
          style="margin-left: 20px"
          type="warning"
          @click="exit()"
          >退出</el-button
        >
      </div></el-header
    >
    <el-container class="main-container">
      <el-aside width="240px" class="main-aside">
        <el-menu
          style="height: 100%"
          :default-active="showActiveKey"
          :unique-opened="true"
          :router="true"
          background-color="#364150"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="item in $store.state.menuList">
            <el-menu-item
              v-if="!item.children || item.children.length == 0"
              v-show="$store.state.menuPermission.includes(item.key)"
              :index="item.key"
              :key="item.key"
            >
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
            <el-submenu
              v-else-if="
                $store.state.menuPermission.includes(item.key) ||
                showTopMenu(item.key)
              "
              :index="item.key"
              :key="item.key"
            >
              <template slot="title">
                <span>{{ item.name }}</span>
              </template>
              <template v-for="item1 in item.children">
                <el-menu-item
                  :index="item1.key"
                  :key="item.key + '-' + item1.key"
                  v-if="$store.state.menuPermission.includes(item1.key)"
                  >{{ item1.name }}</el-menu-item
                >
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
      <el-main
      class="main-main"
        :style="{
          background:
            $route.name == 'survey' ? 'rgba(242, 242, 242, 1)' : '#ffffff'
        }"
      >
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view
      ></el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      showActiveKey: '',
      firstMenuList: [],
      allMenu: [], //所有菜单key
      secondMenuObj: {}, //二级页面菜单key
      loading: false
    };
  },
  watch: {
    $route() {
      this.getUserPermission();
    }
  },
  created() {
    let ldzxUserInfo = localStorage.getItem('ldzxUserInfo');
    if (!ldzxUserInfo) {
      this.$router.replace('/login');
    } else {
      try {
        ldzxUserInfo = JSON.parse(ldzxUserInfo);
      } catch (error) {
        console.log('解析登录信息失败');
        this.$router.replace('/login');
        return false;
      }
      this.$store.commit('setUserInfo', ldzxUserInfo);
      let secondMenuObj = {};
      let firstMenuList = [];
      let allMenu = [];
      for (let data of this.$store.state.menuList) {
        if (data.children && data.children.length) {
          secondMenuObj[data.key] = [];
          firstMenuList.push(data.key);
          allMenu.push(data.key);
          for (let item of data.children) {
            secondMenuObj[data.key].push(item.key);
            allMenu.push(item.key);
          }
        }
      }
      this.secondMenuObj = secondMenuObj;
      this.firstMenuList = firstMenuList;
      this.allMenu = allMenu;
      this.getUserPermission(); //获取用户权限
    }
  },
  methods: {
    exit() {
      if (!this.$store.state.userInfo.token) {
        this.$store.commit('setUserInfo', {});
        localStorage.removeItem('ldzxUserInfo');
        this.$router.push('/login');
        return false;
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .postData('adm/adminuser/AdminUserQuit', {})
        .then((data) => {
          loading.close();
          this.$store.commit('setUserInfo', {
            token: '',
            userInfo: {
              name: ''
            }
          });
          localStorage.removeItem('ldzxUserInfo');
          this.$router.replace('/login');
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    },
    //获取权限
    getUserPermission() {
      this.loading = true;
      console.log( this.$store.state)

      this.$ajax
        .getData('adm/permission/getUserPermission', {
          roleId: this.$store.state.userInfo.roleId
        })
        .then((data) => {
          this.loading = false;
          console.log(data)
          if (!data.resData) {
            this.$message({
              message: '角色权限未配置,请联系管理员进行权限配置',
              type: 'warning'
            });
            this.exit();
            return false;
          }
          let resData = data.resData.split(',');
          this.$store.commit('setMenuPermission', resData);
          if (this.$route.name == 'home') {
            let index = 0;
            for (let dataindex in resData) {
              if (!this.firstMenuList.includes(resData[dataindex])) {
                index = dataindex;
                break;
              }
            }
            this.showActiveKey = resData[index];
            this.$router.replace('/' + resData[index]);
          } else {
            if (
              !resData.includes(this.$route.name) &&
              this.allMenu.includes(this.$route.name)
            ) {
              this.$message({
                message: '该账户无该功能权限',
                type: 'warning'
              });
              this.exit();
            } else {
              this.showActiveKey = this.$route.name;
            }
          }
        })
        .catch((error) => {
          this.loading = false;
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
          this.exit();
        });
    },
    showTopMenu(key) {
      let show = false;
      for (let item of this.secondMenuObj[key]) {
        // console.log(item);
        if (this.$store.state.menuPermission.includes(item)) {
          show = true;
          break;
        }
      }
      return show;
    }
  }
};
</script>
<style lang="scss" scoped>
.main-container {
  padding-top: 60px;
  height: 100vh;
}

/*滚动条整体样式*/
.main-aside::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
/*滚动条滑块*/
.main-aside::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(126, 126, 126, 0.2);
  background: #535353;
}
/*滚动条轨道*/
.main-asider::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  border-radius: 10px;
  background: #ccc;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 50px 0 35px;
  display: flex;
  justify-content: space-between;
  background-color: #364150;
  align-items: center;
  color: #fff;
  .logo {
    line-height: 60px;
    font-size: 24px;
    font-weight: 700;
  }
  .loginInfoAndAction {
    font-size: 14px;
    display: flex;
    align-items: center;
  }
}
</style>